<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Explorer-Test-App-Angular</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li><a href="#">File</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">View</a></li>
            <li><a href="mailto:sergey@bolshchikov.net" target="_blank">Contact</a></li>
          </ul>
        </div>
        <form class="navbar-search pull-right">
          <input type="text" class="search-query" placeholder="Search" ng-model="query"></input>
        </form>
      </div>
    </div>
</div>

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span3 well">
      <h6>Explorer</h6>
      <div id="tree">
        <ul>
          <li><a ng-click="loadContent(tree[0].type, tree[0].title)">{{tree[0].title}}</a>
            <ul ng-repeat="el in tree[0].children | filter: query">
              <li><a ng-click="loadContent(el.type, el.title)">{{el.title}}</a>
                <ul ng-repeat="el in el.children">
                  <li>{{el.title}}</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="span9">
    <div id="toolbar" class="well">
        <h6>Toolbar</h6><br/>
        <ul>
          <li><a href="#" ref="tooltip" title="Back"><img src="img/icons/glyphicons_216_circle_arrow_left.png" /></a></li>
          <li><a href="#" ref="tooltip" title="Up"><img src="img/icons/glyphicons_218_circle_arrow_top.png" /></a></li>
          <li><a href="#" ref="tooltip" title="Forward"><img src="img/icons/glyphicons_217_circle_arrow_right.png" /></a></li>
          <li><a href="#" ref="tooltip" title="New"><img src="img/icons/glyphicons_036_file.png" /></a></li>
          <li><a href="#" ref="tooltip" title="Open"><img src="img/icons/glyphicons_144_folder_open.png" /></a></li>
          <li><a href="#" ref="tooltip" title="Add Folder"><img src="img/icons/glyphicons_145_folder_plus.png" /></a></li>
          <li><a href="#" ref="tooltip" title="Print"><img src="img/icons/glyphicons_015_print.png" /></a></li>
          <li><a href="#" ref="tooltip" title="Bold"><img src="img/icons/glyphicons_102_bold.png" /></a></li>
          <li><a href="#" ref="tooltip" title="Italic"><img src="img/icons/glyphicons_101_italic.png" /></a></li>
          <li><a href="#" ref="tooltip" title="Settings"><img src="img/icons/glyphicons_019_cogwheel.png" /></a></li>
        </ul>
      </div>
      <div id="content" class="well">
        <h6>Content</h6>
        <iframe frameborder="0" width="100%" height="100%" scrolling="yes"></iframe>
      </div>
    </div>
  </div>
</div>

<hr>
  
<footer class="footer">
  <p>
    Online Folder Explorer: online test application based on <a href="//angularjs.org" target="_blank">Angular JS Framework</a><br />
    &copy; <a href="//new-proimage.com" target="_blank">New ProImage</a><br/>
    Author: Sergey N. Bolshchikov, 2012 <br />
    The code is licensed under <a href="//www.gnu.org/licenses/gpl-2.0.html" target="_blank">GNU General Public License, v2</a><br />
    Version 0.0.1 dev<br />
  </p>
</footer>